<template>
  <div class="PricePeople">
    <div class="top">
      <div class="top-title">{{ title }}</div>
      <div class="top-Stepper" v-if="show">
        <div class="people">
          <span>人数</span>
          <van-stepper
            v-model="value"
            theme="round"
            button-size="22"
            disable-input
            min="0"
            class="number"
          />
        </div>

        <div class="people">
          床铺数
          <van-stepper
            v-model="value2"
            theme="round"
            button-size="22"
            disable-input
            min="0"
            class="number"
          />
        </div>
        <div class="people">
          居室数

          <van-stepper
            v-model="value3"
            theme="round"
            button-size="22"
            disable-input
            min="0"
            class="number"
          />
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="PriceRange">价格区间￥{{ priceRange[0] }} - ￥{{ priceRange[1] }}</div>
      <div class="van-slider">
        <van-slider
          v-model="priceRange"
          @change="onChange"
          range
          active-color="#ff9645"
          max="2000"
        />
      </div>

      <div class="allMoney">
        <template v-for="(item, index) in allMoneys" :key="index">
          <div
            class="allMoney-item"
            :class="{ active: allMoneyItem === index }"
            @click="allMoneyClick(index)"
          >
            ￥{{ item.money }}
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, watch } from 'vue'

  const props = defineProps({
    title: {
      type: String,
      default: ''
    },
    show: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: '14px'
    },
    color: {
      type: String,
      default: ''
    },
    weight: {
      type: String,
      default: ''
    },
    bgc1: {
      type: String,
      default: ''
    },
    bgc: {
      type: String,
      default: ''
    }
  })

  const value = ref(0)
  const priceRange = ref([0, 0])
  const value2 = ref(0)
  const value3 = ref(0)

  const changePriceRange = () => {
    priceRange.value[0] = 0
    priceRange.value[1] = 0
  }

  const onChange = (index) => {
    // console.log(priceRange.value[0],priceRange.value[1]);
  }

  const allMoneys = ref([
    { money: '100以下', id: 1 },
    { money: '100-200', id: 2 },
    { money: '200-300', id: 3 },
    { money: '300-400', id: 4 },
    { money: '400-600', id: 5 },
    { money: '600-1000', id: 6 },
    { money: '1000-2000', id: 7 },
    { money: '0-2000', id: 8 }
  ])

  const allMoneyItem = ref()

  const allMoneyClick = (index) => {
    if (index === 0) {
      priceRange.value[0] = 0
      priceRange.value[1] = 100
    } else if (index === 1) {
      priceRange.value[0] = 100
      priceRange.value[1] = 200
    } else if (index === 2) {
      priceRange.value[0] = 200
      priceRange.value[1] = 300
    } else if (index === 3) {
      priceRange.value[0] = 300
      priceRange.value[1] = 400
    } else if (index === 4) {
      priceRange.value[0] = 400
      priceRange.value[1] = 600
    } else if (index === 5) {
      priceRange.value[0] = 600
      priceRange.value[1] = 1000
    } else if (index === 6) {
      priceRange.value[0] = 1000
      priceRange.value[1] = 2000
    } else if (index === 7) {
      priceRange.value[0] = 0
      priceRange.value[1] = 2000
    }

    allMoneyItem.value = index
  }

  defineExpose({ priceRange, changePriceRange })
</script>

<style lang="less" scoped>
  .PricePeople {
    padding: 20px;
    background-color: v-bind('props.bgc1');
    .top {
      .top-title {
        margin-bottom: 20px;
        font-size: v-bind('props.size');
        color: v-bind('props.color');
        font-weight: v-bind('props.weight');
      }
      .top-Stepper {
        background: #f6f8fa;
        border-radius: 15px;
      }

      .people {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        font-size: 13px;
        height: 30px;
        align-items: center;
        padding: 5px 10px;
        .number {
          font-weight: 600;
        }
      }
      .people span {
        margin: 5px 5px;
      }
    }

    .bottom {
      background-color: v-bind('props.bgc');

      border-radius: 10px;

      padding: 10px 0;
      .PriceRange {
        font-weight: 500;
        font-size: 14px;
        color: #333;
        margin-left: 10px;
      }
      .van-slider {
        margin-top: 30px;
      }
      .allMoney {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        }
        .allMoney-item {
          height: 30px;
          margin: 10px 4px 0 4px;
          font-size: 12px;
          text-align: center;
          line-height: 30px;
          border-radius: 15px;
          background-color: #f8f8f8;
          border: 1px solid #fff;
          padding: 0px 5px 0px 5px;
   
      }
    }
  }
  .active {
    color: #ff9645;
    border: 1px solid orange !important;
    background-color: #fff7f1 !important ;
  }
</style>
